<template>
  <div class="amap-page-container">
    <el-amap
      vid="amapDemo"
      :zoom="zoom"
      :center="center"
      class="amap-demo"
      ref="amapView"
      :events="events"
      :amapManager="amapManager"
    >
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        :events="marker.events"
        :visible="marker.visible"
        :draggable="marker.draggable"
        :vid="index"
        :icon="getIcon(index)"
        
      ></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();
export default {
  name: "Home",
  components: {},
  data() {
    let that = this;
    return {
      slotStyle: {
        padding: "2px 8px",
        background: "#eee",
        color: "#333",
        border: "1px solid #aaa",
      },
      zoom: 14,
      center: [121.5273285, 31.21515044],
      amapManager,
      markers: [
        {
          position: [121.5273285, 31.21515044],
          events: {
            click: () => {
              // alert('click marker');
              this.onMarkerClick(this.markers[0]);
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
          index: 0,
          name: "上海",
          // shadow: {
          //   size: new AMap.Size(20, 20),
          //   image:
          //     "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
          //   imageSize: new AMap.Size(20, 20),
          // },
        },
        {
          position: [113.026179, 28.223359],
          events: {
            click: () => {
              // alert('click marker');
              this.onMarkerClick(this.markers[1]);
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[1].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: false,
          template: "<span>1</span>",
          index: 1,
          name: "长沙",
          icon: "",
        },
      ],
      events: {
        init(amap) {
          // console.log("init");
          console.log(amap);

          var boundsArray = [];
          that.markers.forEach((m) => {
            boundsArray.push(new AMap.LngLat(m.position[0], m.position[1]));
          });
          var bounds = new AMap.ArrayBounds(boundsArray);
          amap.setBounds(bounds);
        },
      },
      currentMarker: {},
    };
  },
  methods: {
    onMarkerClick(marker) {
      console.log(marker);
      this.currentMarker = marker;
      // console.log(this.$refs.amapView);
      // var bounds = new AMap.Bounds();
      // console.log(bounds);
      // console.log(amapManager);

      /*  var amap = amapManager.getMap();
      var boundsArray = [];
      this.markers.forEach((m) => {
        boundsArray.push(new AMap.LngLat(m.position[0], m.position[1]));
      });
      var bounds = new AMap.ArrayBounds(boundsArray);
      amap.setBounds(bounds); */
    },
    getIcon(index) {
      if (this.currentMarker.index == index) {
        // return "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"

        return new AMap.Icon({
          size: new AMap.Size(20, 30), // 图标尺寸
          image: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", // Icon的图像
          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(20, 30), // 根据所设置的大小拉伸或压缩图片
        });

        // return {
        //   size: new AMap.Size(40, 50), // 图标尺寸
        //   image: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", // Icon的图像
        //   imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
        //   imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片
        // }
      }

      return "";
    },
  },
};
</script>

<style lang="scss" scoped>
.amap-demo {
  height: 300px;
  width: 600px;
}
</style>